<template>
  <div id="guide">
    <div class="_form">
      <ul class="_box">
        <li class="_step">
          <div class="_cardBox">
            <div class="_lable">
              <span class="_icon">
                <i class="iconfont icon-arrowhead-down-outli"></i>
              </span>
              <span class="_txt">
                项目基础信息
              </span>
            </div>
            <div class="_input">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="项目名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="组织名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="组织规模" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="项目负责人" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="项目所在地" prop="name">
                  <div
                    style="height:50px;width:50%; float:left">
                    <el-select v-model="ruleForm.region" placeholder="请选择省份">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select></div>
                  <div
                    style="height:50px;width:50%;float:left">
                    <el-select v-model="ruleForm.region" placeholder="请选择城市">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select></div>
                  
                </el-form-item>
              </el-form>
            </div>
          </div>
        </li>
        <li class="_step">
          <div class="_cardBox">
            <div class="_lable">
              <span class="_icon">
                <span class="_icon">
                <i class="iconfont icon-arrowhead-down-outli"></i>
              </span>
              </span>
              <span class="_txt">
                项目申请信息
              </span>
            </div>
            <div class="_input">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="融资金额" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="融资期限" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="项目类型" prop="name">
                  <el-select v-model="ruleForm.region" placeholder="请选择类型">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="计划上传" prop="name" >
                  <el-input v-model="ruleForm.name" placeholder="请选择上传文件"></el-input>
                  <div
                    style="width:50px;height:38px;position:absolute;
                    right:0;top:0;background:#f5f5f5;
                    border-radius:5px;
                    border:1px solid #ccc;
                    text-align:center">
                    <el-button  type="text">浏览</el-button>
                  </div>
                  
                </el-form-item>
              </el-form>
            </div>
          </div>
        </li>
        <li class="_step">
          <div class="_cardBox">
            <div class="_lable">
              <span class="_icon">
                <span class="_icon">
                <i class="iconfont icon-arrowhead-down-outli"></i>
              </span>
              </span>
              <span class="_txt">
                主要负责人信息
              </span>
            </div>
            <div class="_input">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <el-form-item label="项目责任人" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="name">
                  <el-select v-model="ruleForm.region" placeholder="请选择类型">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="责任人证件号" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="责任人电话" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="项目联系人" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="name">
                  <el-select v-model="ruleForm.region" placeholder="请选择类型">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系人证件号" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </li>
        <li class="_step">
          <div class="_cardBox">
            <div class="_lable">
              <span class="_icon">
                <span class="_icon">
                <i class="iconfont icon-arrowhead-down-outli"></i>
              </span>
              </span>
              <span class="_txt">
                资金账户绑定
              </span>
            </div>
            <div class="_input">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">  
                <el-form-item label="账户类型" prop="name">
                  <el-select v-model="ruleForm.region" placeholder="请选择类型">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="项目资金账户" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                  <div
                    style="width:100px;height:38px;
                    margin:5px auto;
                    text-align:center">
                    <el-button  >开始绑定</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="财务负责人" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="财务联系电话" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </li>
        <li class="_step">
          <div class="_cardBox">
            <div class="_lable">
              <span class="_icon">
                <span class="_icon">
                <i class="iconfont icon-arrowhead-down-outli"></i>
              </span>
              </span>
              <span class="_txt">
                附件提供
              </span>
            </div>
            <div class="_input">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                <el-form-item label="介绍材料上传" prop="name" >
                  <el-input v-model="ruleForm.name" placeholder="请选择上传文件"></el-input>
                  <div
                    style="width:50px;height:38px;position:absolute;
                    right:0;top:0;background:#f5f5f5;
                    border-radius:5px;
                    border:1px solid #ccc;
                    text-align:center">
                    <el-button  type="text">浏览</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="宣传材料上传" prop="name" >
                  <el-input v-model="ruleForm.name" placeholder="请选择上传文件"></el-input>
                  <div
                    style="width:50px;height:38px;position:absolute;
                    right:0;top:0;background:#f5f5f5;
                    border-radius:5px;
                    border:1px solid #ccc;
                    text-align:center">
                    <el-button  type="text">浏览</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="项目标识上传" prop="name" >
                  <el-input v-model="ruleForm.name" placeholder="请选择上传文件"></el-input>
                  <div
                    style="width:50px;height:38px;position:absolute;
                    right:0;top:0;background:#f5f5f5;
                    border-radius:5px;
                    border:1px solid #ccc;
                    text-align:center">
                    <el-button  type="text">浏览</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="组织标识上传" prop="name" >
                  <el-input v-model="ruleForm.name" placeholder="请选择上传文件"></el-input>
                  <div
                    style="width:50px;height:38px;position:absolute;
                    right:0;top:0;background:#f5f5f5;
                    border-radius:5px;
                    border:1px solid #ccc;
                    text-align:center">
                    <el-button  type="text">浏览</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="项目附加条款" prop="name" >
                  <el-input v-model="ruleForm.name" placeholder="请选择上传文件"></el-input>
                  <div
                    style="width:50px;height:38px;position:absolute;
                    right:0;top:0;background:#f5f5f5;
                    border-radius:5px;
                    border:1px solid #ccc;
                    text-align:center">
                    <el-button  type="text">浏览</el-button>
                  </div>
                </el-form-item>
              </el-form>
              

            </div>
            
          </div>
        </li>
      </ul>
    </div>
    <div style="
      width:100%;
      height:200px;
      position:relative;
      "></div>
    <div class="footer">
      <div class="_box">
        <span class="_save">
          <i class="el-icon-folder-opened"></i>
        </span>
        <span class="_savetxt">保存</span>
       
        <span class="_button">提交</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
    }
  },
  methods:{
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>


<style scoped>
/*全局样式 */
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  #guide{
    width: 100%;
    height: 100%;
      
  }
  ._form{
    width: 100%;
    position: relative;;
    top: 50px;
    
  }
  .footer{
    width: 100%;
    height:50px;
    position: fixed;
    bottom: 0;
    z-index: 200;
    background: rgba(1,1,1,0.3);
  }
/* form*/
  ._form ._box{
    height: 100%;
    width: 100%;
    position: relative;
  }
  ._form ._step{
    min-height: 100px;
    width: 100%;
    position: relative;
  }
  ._form ._cardBox{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  ._form ._lable{
    height: 50px;
    border-bottom: #ccc solid 1px;
    margin-top:10px;
  }
  ._form ._icon{
    width: 50px;
    height:50px;
    position:absolute;
    color: #f90;
  }
  ._form .iconfont{
    font-size: 35px;
    text-align: center;
    line-height: 50px;
  }
  ._form ._txt{
    position: absolute;
    width: 200px;
    height: 50px;
    left: 50px;
    font-size: 20px;
    color: #666;
    text-align: left;
    line-height: 50px;
  }
  ._form ._input{
    width:90%;
    position: relative;
    margin:20px auto;
  }
/*footer */
  .footer ._box{
    width: 100%;
    height:100%;
    position: relative;
  }
  .footer ._save{
    width: 35px;
    height: 35px;
    position: absolute;
    border-radius: 42px;
    background: #F0E68C;
    top:15%;
    left:8%;
    font-size:20px;
    line-height: 35px;
    text-align: center;
  }
  .footer ._savetxt{
    position: absolute;
    width: 25%;
    height: 70%;
    background: #1E90FF;
    border-radius: 42px;
    top:15%;
    left:20%;
    color: #fff;
    font-size:16px;
    font-weight: 600; 
    font-family:Century Gothic;
    line-height: 35px;
    text-align: center;
  }
  .footer ._button{
    position: absolute;
    width: 35%;
    height: 70%;
    background: linear-gradient(to right,#ff6600    ,#ff3300);
    border-radius: 42px;
    top:15%;
    right: 10%;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-size:16px;
    font-weight: 600; 
    font-family:Century Gothic;
  }
</style>
